(function (window) {
	"use strict";

	// Your starting point. Enjoy the ride!
	//存储筛选条件的函数
	let filters = {
		all(todos) {
			return todos;
		},
		active(todos) {
			return todos.filter((value) => !value.completed);
		},
		completed(todos) {
			return todos.filter((value) => value.completed);
		},
	};
	//本地存储数据
	const TODOS_KEY = "todos-vue";
	let todoStorage = {
		//获取本地存储数据localStorage
		get() {
			return JSON.parse(localStorage.getItem(TODOS_KEY)) || [];
		},
		set(value) {
			localStorage.setItem(TODOS_KEY, JSON.stringify(value));
		},
	};
	new Vue({
		el: "#app",
		data: {
			//存储所有事项信息
			todos: todoStorage.get(),
			///新增加的todo
			todo: "",
			//存储正在编辑的todo
			editingTodo: null,
			//存储正在编辑的todo的原始标题
			titleBeforeEdit: "",
			//存储筛选事项类别
			todoType: "all",
		},
		watch: {
			//帧听器 监听todos的变化
			todos: {
				deep: true,//监听todos深度的属性变化
				handler() {
					//当todos发生变化，就将todos更新到本地存储中
					todoStorage.set(this.todos);
				},
			},
		},
		computed: {
			/**
			 * 获取待办事项个数
			 * @returns {number}
			 */
			counts() {
				return filters.active(this.todos).length;
			},
			/**
			 * 判断是否事项全部完成，会频繁的计算操作，添加到计算属性中
			 * @returns {boolean}
			 */
			allDone: {
				get() {
					//counts===0表示所有事项都完成
					return this.counts === 0;
				},
				//通过setter获取 v-module 绑定的值
				set(value) {
					this.todos.forEach((todo) => {
						todo.completed = value;
					});
				},
			},
			/**
			 * 外部列表使用该计算属性，根据不同的筛选条件，进行展示列表信息
			 * @returns {*}
			 */
			filteredTodo() {
				return filters[this.todoType](this.todos);
			},
		},
		methods: {
			/**
			 * 设置单位
			 * @param word
			 * @returns {*}
			 */
			pluralize(word) {
				return word + (this.counts === 1 ? "" : "s");
			},

			/**
			 * 新增todo
			 */
			addTodo() {
				const title = this.todo.trim();
				//没有内容则返回
				//检测内容
				if (!this.todo) {
					return;
				}
				//新增内容
				this.todos.push({
					id: this.todos.length + 1,
					title: title,
					completed: false,
				});
				//清空
				this.todo = "";
			},
			/**
			 * 删除按钮
			 */
			deleteTodo(item) {
				//删除数组中的某一项
				const index = this.todos.indexOf(item);
				this.todos.splice(index, 1);
			},
			/**
			 * 删除已经完成的事项
			 */
			deleteCompleted() {
				// const len = this.todos.length;
				// for (let i = 0; i < len; i++) {
				// 	if (this.todos[i].completed) {
				// 		this.todos.splice(i, 1);
				// 	}
				// }
				//方式2：找到未完成的事项，复制给todos
				this.todos = filters.active(this.todos);
			},
			/**
			 * 编辑事项
			 * @param todo
			 */
			editTodo(todo) {
				this.titleBeforeEdit = todo.title;
				this.editingTodo = todo;
			},
			/**
			 * 保存编辑事项
			 */
			saveTodo(todo) {
				//如果editingTodo 是null 则返回，不在触发
				if (!this.editingTodo) return;
				this.editingTodo = null;
				this.titleBeforeEdit = "";
				console.log("saveTodo");
				if (!todo.title) {
					//保存空的编辑内容 删除todo
					//删除空内容
					this.deleteTodo(todo);
				}
			},
			/**
			 * 撤销编辑事项
			 */
			undoEdit() {
				//editingTodo的指针和当前todo的指针 指向同一个引用
				this.editingTodo.title = this.titleBeforeEdit;
				this.editingTodo = null;
				this.titleBeforeEdit = "";
			},
		},
		directives: {
			//自定义指令  触发编辑 输入框自动获取焦点
			"todo-focus": function (el, binding) {
				//当编辑框显示的时候 获取焦点
				if (binding.value) {
					el.focus();
				}
			},
		},
	});
})(window);
